<?php $this->headScript()->appendFile($this->baseUrl() . "/plugins/datatables/jquery.dataTables.min.js","text/javascript"); ?>
<?php $this->headScript()->appendFile($this->baseUrl() . "/plugins/validate/jquery.validate.js","text/javascript"); ?>
<?php $this->headScript()->appendFile($this->baseUrl() . "/js/modules/safety/Wizard.js","text/javascript"); ?>
<?php $this->headScript()->appendFile($this->baseUrl() . "/js/modules/safety/Role.js","text/javascript"); ?>
<?php $this->headScript()->appendFile($this->baseUrl() . "/js/modules/safety/Privilege.js","text/javascript"); ?>

<?php $this->headScript()->captureStart(); ?>
	$(document).ready(function() {	
		var roles = new com.em.Role();		
		// network
		roles.setUrl({
			toTable : '<?php echo $this->url(array('controller'=>'role', 'action'=>'read-items')); ?>',
			toUpdate : '<?php echo $this->url(array('controller'=>'role', 'action'=>'update', 'format'=>'html')); ?>',
		});
		
		// configuration of widgets
		roles.configureTable('#tblroles');
		
		// CRUD
		roles.clickToAdd('#add-role');
		roles.setEditRole(false);
		roles.clickToUpdate('#tblroles a[id^=update-role-]');
		roles.clickToDelete('#delete-role');
		
		var privileges = new com.em.Privilege();
		privileges.configureTable('#tblprivileges');
		privileges.configureDropDown('#moduleFilter', '#controllerFilter', '#actionFilter');
		privileges.clickToAdd('#addPrivilege');
		privileges.clickToDelete('#removePrivilege');
		
		var wizard = new com.em.Wizard();
		wizard.setPrivilege(privileges);
		wizard.setRole(roles);
<!-- 		wizard.configureTabs("#tabs"); -->
		wizard.clickToNext('#goToRoles, #goToAssignRolesToUsers');
		wizard.clickToBack('#backToPrivileges, #backToRoles');
	});
<?php $this->headScript()->captureEnd(); ?>
						<div class="grid_8">
                        	<div class="da-panel">
                            	<div class="da-panel-header">
                                	<span class="da-panel-title">
                                        <img src="/images/icons/color/wand.png" alt="" />
                                        Wizard Form
                                    </span>
                                    
                                </div>
                                <div class="da-panel-content">
                                	<form id="da-ex-wizard-form" class="da-form">
                                    	<fieldset class="da-form-inline">
                                        	<legend>Account</legend>
                                        	<div class="da-form-row">
                                        		<div class="da-form-col-2-8">
											        <label>Modules</label>
	                                                <select id="moduleFilter" name="moduleFilter" src="<?php echo $this->url(array('controller'=>'wizard', 'action'=>'read-controllers', 'format'=>'html')); ?>">
	                                                	<option value="%">%</option>
		                                                <?php foreach ($this->modules as $module) : ?>
		                                                	<option value="<?php echo $module; ?>"><?php echo $module; ?></option>
														<?php endforeach; ?>
													</select>
											    </div>
											    <div class="da-form-col-2-8">
											        <label>Controllers</label>
	                                                <select id="controllerFilter" name="controllerFilter" src="<?php echo $this->url(array('controller'=>'wizard', 'action'=>'read-actions', 'format'=>'html')); ?>">
	                                                	<option value="%">%</option>
													</select>
											    </div>
											    <div class="da-form-col-2-8">
											        <label>Actions</label>
	                                                <select id="actionFilter" name="actionFilter">
	                                                	<option value="%">%</option>
													</select>
											    </div>
											    <div class="da-form-col-2-8">
											        <label>Actions</label>
	                                                <input type="button" class="da-button red small" id="addPrivilege" value="Add">
											    </div>
											    <div class="da-form-col-8-8">
													<table class="da-table" id="tblprivileges">
				                                        <thead>
				                                            <tr>
				                                            	<th><input type="checkbox" value="0"></th>
																<th><?php echo $this->translate('Module'); ?></th>
																<th><?php echo $this->translate('Controller'); ?></th>
																<th><?php echo $this->translate('Action'); ?></th>
				                                            </tr>
				                                        </thead>
				                                        <tbody>
				                                            
				                                        </tbody>
				                                    </table>
											    </div>
                                            </div>
                                        </fieldset>
                                    	<fieldset class="da-form-inline">
                                        	<legend>Member</legend>
                                        	<div class="da-form-row">
                                            	<label>Fullname <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                	<input type="text" name="fullname" class="required" />
                                                </div>
                                            </div>
                                        	<div class="da-form-row">
                                            	<label>Address <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                	<textarea name="address" class="required"></textarea>
                                                </div>
                                            </div>
                                        	<div class="da-form-row">
                                            	<label>Gender <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                	<ul class="da-form-list">
                                                    	<li><input type="radio" name="gender" class="required" /> <label>Male</label></li>
                                                    	<li><input type="radio" name="gender" /> <label>Female</label></li>
                                                    </ul>
                                                    <label for="gender" class="error" generated="true" style="display:none"></label>
                                                </div>
                                            </div>
                                        </fieldset>
                                    	<fieldset class="da-form-inline">
                                        	<legend>Membership</legend>
                                        	<div class="da-form-row">
                                            	<label>Membership Period <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                	<select name="period" class="required">
                                                    	<option>1 Month</option>
                                                    	<option>3 Months</option>
                                                    	<option>6 Months</option>
                                                        <option>1 Year</option>
                                                    </select>
                                                </div>
                                            </div>
                                        	<div class="da-form-row">
                                            	<label>Package <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                	<ul class="da-form-list">
                                                    	<li><input type="radio" name="package" class="required" /> <label>Basic</label></li>
                                                    	<li><input type="radio" name="package" /> <label>Full</label></li>
                                                    	<li><input type="radio" name="package" /> <label>Premium</label></li>
                                                    </ul>
                                                    <label for="package" class="error" generated="true" style="display:none"></label>
                                                </div>
                                            </div>
                                        </fieldset>
                                    	<fieldset class="da-form-inline">
                                        	<legend>Confirmation</legend>
                                        	<div class="da-form-row">
                                            	<label>Payment Method <span class="required">*</span></label>
                                                <div class="da-form-item large">
                                                	<select name="payment" class="required">
                                                    	<option>PayPal</option>
                                                    	<option>Visa</option>
                                                    	<option>Mastercard</option>
                                                        <option>Wire Transfer</option>
                                                    </select>
                                                </div>
                                            </div>
                                        	<div class="da-form-row">
                                                <div class="da-form-item large">
                                                	<ul class="da-form-list inline">
                                                    	<li><input type="checkbox" name="tos" class="required" /> <label>I agree to the terms of service <span class="required">*</span></label></li>
                                                    </ul>
                                                    <label for="tos" class="error" generated="true" style="display:none"></label>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>
                            </div>
                        </div>